<template>
  <!-- <div>api统一管理</div> -->
  <Panel title="安全管理能力" class="panel">
    <div class="df">
      <div class="left">
        <el-menu
            default-active="2"
            background-color="#545c64"
            class="el-menu-vertical-demo"
          >
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">数据分级分类</span>
            </el-menu-item>
            <el-menu-item @click="rou" index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">资产管理</span>
            </el-menu-item>
          </el-menu>
      </div>
      <div class='f1 rgmain'>
        <el-breadcrumb >
          <el-breadcrumb-item><span class="group">分级管理</span></el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/group/group2' }"><span class="group1">分类管理</span></el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/group/group3' }"><span class="group1">数据识别规则</span></el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/group/group4' }"><span class="group1">数据识别规则</span></el-breadcrumb-item>
          <!-- <el-breadcrumb-item :to="{ path: '/group/group4' }"><span class="group1">分级分类任务管理</span></el-breadcrumb-item> -->
        </el-breadcrumb>
        <!--查询 -->
    <el-form inline :model="searchData" class="searchDataForm">
      <!-- 订单号 -->
      <el-form-item label="分级名称">
        <el-input size="mini" v-model="searchData.orderNo"></el-input>
      </el-form-item>
      <!-- 收货人 -->
      <el-form-item label="最近修改人">
        <el-input size="mini" v-model="searchData.consignee"></el-input>
      </el-form-item>
      <!-- 选择时间 -->
      <el-form-item label="最近修改时间">
        <el-date-picker
          v-model="searchData.date"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="mini"
        ></el-date-picker>
      </el-form-item>
      <!-- 按钮 -->
      <el-form-item>
        <el-button type="primary" size="mini" @click="search123">查询</el-button>
        <el-button type="info" size="mini" @click="reset123">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="header df jcsb ">
      <!-- 新建分组 -->
      <div class="newAPI df jcc aic" @click="newAPI">+新增分级</div>
      <div class="time df jcr aic">
      <!-- <span>创建时间</span> -->
        <!-- <div class="block df aic">
          <span class="demonstration">创建时间</span>
           <el-date-picker
          v-model="createTime"
          @change='timeChange'
          type="daterange"
          value-format='yyyyMMDD'
          :picker-options="pickerOptions"
          placeholder="   选择日期时间"
          size="small"
          align="right">
        </el-date-picker>
        </div> -->
      <!-- 分组搜索 -->
      <!-- <div > 
          <el-input
                v-model="search"
                style="display: inline-block;width: 180px"
                size="small"
                placeholder="收缩分组名称"
          ></el-input>        
      </div>           -->
    </div>
    </div>

    <div id="caller" ref="tables" class="caller">
    <!-- 表格    -->
    <el-table class="tatle" :header-cell-style="{background: '#EBF2F9'}"  :data="tableData" stripe  style="width: 100%" ref="table">         
      <!-- api名称 -->
      <el-table-column prop="name" label="分级名称" width="300" >    
      </el-table-column>  
      <!-- 请求方式   -->
      <el-table-column  prop="create" label="安全等级梯度值" min-width="100" column-key="create">    
      </el-table-column>  
      <!-- 创建时间   -->
      <el-table-column prop="create_time"  label="分级标识色" width="300" column-key="create_time">    
      </el-table-column>
      <!--API数量  -->
      <el-table-column prop="num"  label="最近修改人" width="200" column-key="num">    
      </el-table-column>
      <!-- 描述 -->
      <el-table-column prop="time"  label="最近修改时间" width="200" column-key="time">    
      </el-table-column>
      <!-- 描述 -->
      <el-table-column prop="remark"  label="描述" width="200" column-key="remark">    
      </el-table-column>
      <!--  操作  -->
      <el-table-column label="操作" width="200">
        <template slot-scope="scope" >
          <div class="df">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <el-button size="mini" @click="handleEdit(scope.row)" class="caozuo df jcc aic"><i class="iconfont icon-bianji"></i></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button size="mini"  @click="handleDelete(scope.row.id)" class="caozuo df jcc aic"><i class="iconfont icon-shanchu"></i></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="查看" placement="top">
              <el-button size="mini"  @click="handlechakan(scope.row)" class="caozuo df jcc aic"><i class="el-icon-view"></i></el-button>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑弹出框 -->
    <el-dialog title="编辑分组" :visible.sync="dialogTableVisible1">
      <el-form label-position="right" :model="editData">
        <el-form-item label="分级名称" :label-width="formLabelWidth">
          <el-input v-model="editData.name " autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="安全等级梯度值" :label-width="formLabelWidth">
          <el-input v-model="editData.create" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分级标识色" :label-width="formLabelWidth">
          <el-button type="danger">单击换色</el-button>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="editData.remark " autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="savetoConfigure">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新建分组弹框 -->
    <el-dialog title="新建分组" :visible.sync="dialogTableVisible2" width="40%">
      <el-form :rules="rules" ref="RuleForm" status-icon label-position="right" :model="api_group_info" >
        <el-form-item   label="分级名称" :label-width="formLabelWidth" >
          <el-input class="ggg" v-model="api_group_info.api_name" autocomplete="off" placeholder="不超过10个汉字、字母、数字"></el-input>
        </el-form-item>
        <el-form-item   label="安全等级梯度值" :label-width="formLabelWidth" >
          <el-input class="ggg" v-model="api_group_info.create" autocomplete="off" placeholder="不超过10个汉字、字母、数字"></el-input>
        </el-form-item>
        <el-form-item   label="分级标识色" :label-width="formLabelWidth"  >
          <el-button type="danger">单击换色</el-button>
        </el-form-item>
        <el-form-item   label="描述" :label-width="formLabelWidth" prop="remark "  >
          <el-input type="textarea" class="ggg" v-model="api_group_info.remark " autocomplete="off" placeholder="请输入分组描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible2 = false" >取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
   <!-- 分页 -->
    <el-pagination
      style="margin-top: 30px"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[3, 5, 10, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
      </div>
    </div>

  </Panel>
</template>

<script>
// 引入panel
import Panel from "@/components/panel/Panel";
// 引入正则
import { GROUP_REG , PHONE_REG } from "@/utils/reg";
export default {
  components: {
    Panel,
  },
  data() {
    //验证api名称
    let checkName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入分组名称"));
      } else if (!GROUP_REG.test(value)) {
        //正则验证
        callback(
          new Error("输入长度在10个之内,只能包含字母、数字和汉字")
        )
       } else {
        callback();
      }
    };
    return {
      createTime:[new Date(),new Date()],
      //创建时间
       pickerOptions: {
          shortcuts: [{
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          },
            {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      //搜索
      // 搜索框
      searchData: {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: []
      },
      search:"",
      // value: "",
       //输入框
      formLabelWidth: "120px",
      value2:true,
      // 编辑弹出框
      dialogTableVisible1:false,
      // 新建分组弹框
      dialogTableVisible2:false,
      innerVisibleProvider:false,
      currentPage: 1, //表示当前显示的页码
      pageSize: 5, //每一页显示的条数
      total: 150, //总条数
      apigroup:[],//分组
      rules: {
          name:{required: true,validator: checkName, trigger: "blur"},
        },

      tableData: [
        {
          name:"456",
          create_time: "绿色",
          create: '1级',
          num: 'admin',
          time: '2022-11-24',
          remark: '1111111'
        },
        {
          name:"ssfa",
          create_time: "绿色",
          create: '2级',
          num: 'admin',
          time: '2022-11-23',
          remark: '1111111'
        },
        {
          name:"788",
          create_time: "绿色",
          create: '9级',
          num: 'admin',
          time: '2022-11-26',
          remark: '1111111'
        },
        {
          name:"jjj",
          create_time: "绿色",
          create: '4级',
          num: 'admin',
          time: '2022-11-24',
          remark: '1111111'
        },
      ],
       // 编辑弹框数据
      editData: {
        id:"",
        name:"",
        create_time:"",
        create:"",
        num:'',
        remark :"",
      },
      // 新建API弹框数据
      newAPIData:{
          api_name:"",
          method: "",
          api_type: "",
          api_group_id: "",
          create_time: "",
          modify_time:"",
          service_provider: "",
          creator: "",
          url:"",
          secret_id:"",
          secret_key:"",
          describe:"",
          auth_params_info:"",
          app_name:"",
          historical_call:"",
          api_status:"",
          average_duration:"",
          success_rate:"",
          failure_rate:"",
          param_key:"",
          param_value:"",
          forward:"是",

      },
      // 新建分组
      api_group_info:{
        id:"",
        name:"",
        create_time:"",
        create:"",
        num:'',
        remark :"",
      },
    };

  },
  methods: {
    rou(){
        this.$router.push(
          {
            path:'/group/group5'
          }
        )
    },
    //查询
    search123() {
      this.tableData = [{
          name:"456",
          create_time: "绿色",
          create: '1级',
          num: 'admin',
          time: '2022-11-24',
          remark: '1111111'
        }]
    },
    //重置
    reset123() {
      this.searchData = {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: []
      };
      this.tableData = [
        {
          name:"456",
          create_time: "绿色",
          create: '1级',
          num: 'admin',
          time: '2022-11-24',
          remark: '1111111'
        },
        {
          name:"ssfa",
          create_time: "绿色",
          create: '2级',
          num: 'admin',
          time: '2022-11-23',
          remark: '1111111'
        },
        {
          name:"788",
          create_time: "绿色",
          create: '9级',
          num: 'admin',
          time: '2022-11-26',
          remark: '1111111'
        },
        {
          name:"jjj",
          create_time: "绿色",
          create: '4级',
          num: 'admin',
          time: '2022-11-24',
          remark: '1111111'
        },
      ]
    },
     //改变时间
    timeChange(){
      console.log(this.createTime)
      let startTime = this.createTime[0]+' 00:00:00'
      let endTime = this.createTime[1]+' 23:59:59'

    },
    ruwry(){
      console.log(this.newAPIData.api_type);
    },
    getClientWidth(){
      console.log(this.$refs.tables.offsetWidth)
      console.log(this.$refs.propsModel.offsetWidth)
      this.$refs.propsModel.style.width=this.$refs.tables.offsetWidth+'px'
    },
    // 新建分组
    newAPI(){
      this.dialogTableVisible2 = true;
    },
    // 新建分组-添加
    submitForm(){
      this.tableData = [
        {
          name:"wy",
          create_time: "红色",
          create: '1级',
          num: 'admin',
          time: '2022-11-24',
          remark: '1111111'
        },
        {
          name:"456",
          create_time: "绿色",
          create: '1级',
          num: 'admin',
          time: '2022-11-24',
          remark: '1111111'
        },
        {
          name:"ssfa",
          create_time: "绿色",
          create: '2级',
          num: 'admin',
          time: '2022-11-23',
          remark: '1111111'
        },
        {
          name:"788",
          create_time: "绿色",
          create: '9级',
          num: 'admin',
          time: '2022-11-26',
          remark: '1111111'
        },
        {
          name:"jjj",
          create_time: "绿色",
          create: '4级',
          num: 'admin',
          time: '2022-11-24',
          remark: '1111111'
        },
      ]
      this.dialogTableVisible2 = false
      this.api_group_info={
        id:"",
        name:"",
        create_time:"",
        create:"",
        num:'',
        remark :"",
      }
      // this.$refs.RuleForm.validate(async (valid) => {
      //   if (valid) {
      //     // let res = await addAccount(this.AddRuleForm);

      //     // //判定 注册成功后,进行跳转到指定页面
      //     // if (res.code == 0) {
      //     //   this.$router.push("/account/account-list");
      //     // }
      //   } else {
      //     //不通过
      //     this.$message.error("添加失败");
      //   }
      // });
    },
     // 删除
    handleDelete(id) {
      this.$confirm("确定删除？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
     // 查看
    handlechakan(row) {
      this.dialogTableVisible1 = true;
      this.editData = { ...row };
    },
     // 编辑
    handleEdit(row) {
      this.dialogTableVisible1 = true;
      this.editData = { ...row };
    },
    // 编辑-保存修改
    saveEdit() {
      this.$confirm("确定修改？是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
          this.$message({
            type: 'success',
            message: '编辑成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消编辑'
          });
        });
        // .then(async () => {
        //   let { code } = await editAccount(this.editData);
        //   console.log(code);
        //   if (code == 0) {
        //     this.dialogTableVisible = false;
        //     // 刷新页面
        //     this.getDataList();
        //   }
        // })
        // .catch(() => {
        //   this.$message({
        //     type: "info",
        //     message: "已取消删除"
        //   });
        // });
    },
    savetoConfigure(){
      this.$confirm("确定修改？是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
          this.$message({
            type: 'success',
            message: '已完成API配置，下一步请提交审核!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消编辑'
          });
        });
        // .then(async () => {
        //   let { code } = await editAccount(this.editData);
        //   console.log(code);
        //   if (code == 0) {
        //     this.dialogTableVisible = false;
        //     // 刷新页面
        //     this.getDataList();
        //   }
        // })
        // .catch(() => {
        //   this.$message({
        //     type: "info",
        //     message: "已取消删除"
        //   });
        // });
    },
     //改变第几页
    handleCurrentChange(val) {
      this.currentPage = val;
      // this.getCateData();
    },
  },
   mounted() {
  },
};
</script>

<style  scoped>
.header{
  margin-bottom: 8px;
}
/* 创建时间 */
.demonstration{
  margin-right: 10px;
}
.block{
  margin-right: 8px;
}
/* 操作按钮 */
.caozuo{
  width: 30px;
  text-align: center;
  border-radius: 50%;
}
.newAPI{
  width: 114px;
  height: 34px;
  background: #33BDFC;
  border: 1px solid rgba(51,189,252,1);
  border-radius: 3px;
  color: #fff;
}
.el-dialog{
  width: 500px;
}
.ggg{
  width: 500px;
}
.el-input.is-disabled /deep/.el-input__inner {
  background-color: #fff !important;

}

.dynamic-header{
  position: absolute;
  height: 150px;
  top:198px;
  left: 20px;
  background-color: #fff;
  z-index: 3000;
  /* border: 1px solid red; */
  box-shadow:-5px 5px  8px 1px rgba(0, 0, 0, 0.2) ;

}
/* 表格 */
.tatle{
    margin-bottom: 50px;
}
/* 弹框 */
.el-dialog__wrapper /deep/.el-dialog__header{
   /* background-color: antiquewhite; */
   /* padding: 0 10px; */
   margin: 0 30px;
   border-bottom: 1px solid #E5E5E5;
  }
  .el-dialog{
    position: relative;
  }
  .el-dialog__wrapper /deep/.el-dialog__header::before{
    position: absolute;
    left: 30px;
    top: 23px;
    content: "";
    display: block;
    clear: both;
    width: 2px;
    height: 18px;
    background-color: rgb(34, 180, 216);
}
.left{
  width: 150px;
  /* background-color: rgb(48, 41, 41); */
}
.leftOne{
    width: 100px;
    height: 30px;
    background-color: rgb(17, 157, 212);
    color: red;
}
.caller{
  margin-top: 15px;
}
.group{
  color: black;
  font-weight: 700;
  font-size: 15px;
}
.group1{
  color: black;
  font-weight: 400;
}
.rgmain{
  width: 70%;
  padding-left: 15px;
}
.el-menu-vertical-demo{
  height: 100%;
}
.searchDataForm{
  margin-top: 20px;
}
</style>
